<template>
  <div class="dashboard-container">
     <div class="box">
        <div class="digital">
          <div class="header">
            <img :src="userInfo.staffPhoto" alt="" class="img" v-if="userInfo.staffPhoto">
            <span v-else class="avatar">{{ userInfo.username.charAt(0) }}</span>
            <div class="footer">
              <div>{{ userInfo.company }}<span class="experience">体验版</span></div>
               <span class="address">{{ $store.state.user.userInfo.username }} | 
                {{ userInfo.company }}--{{ userInfo.departmentName }}</span>
            </div>
          </div>
          <!--数字区域  -->
           <div class="person">
              <div class="organization">
                 <span class="org-per">组织总人数</span>
                 <!-- <span class="number">222</span> -->
                 <CountTo :start-val="0" :end-val="HomeData.employeeTotal" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">正式员工</span>
                 <CountTo :start-val="0" :end-val="HomeData.regularEmployeeTotal" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">合同带签署</span>
                 <CountTo :start-val="0" :end-val="HomeData.contractSignTotal" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">待入职</span>
                 <CountTo :start-val="0" :end-val="HomeData.toBeEmployed" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">本月转正</span>
                 <CountTo :start-val="0" :end-val="HomeData.toBeConfirmed" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">本月离职</span>
                 <CountTo :start-val="0" :end-val="HomeData.toBeDismissed" :duration="1000" class="number"></CountTo>
               </div>
               <div class="organization">
                 <span class="org-per">接口总访问</span>
                 <CountTo :start-val="0" :end-val="HomeData.interfaceAccessTotal" :duration="1000" class="number"></CountTo>
               </div>
           </div>
        </div>

        <div class="help">
           <h3>帮助链接</h3>
            <div class="demo">
               <ul>
                <li>
                  <svg-icon icon-class="star" style="color: brown;" class="icon"></svg-icon>
                  <router-link to="#">入门指南</router-link>
                </li>
                <li>
                  <svg-icon icon-class="star" style="color: brown;" class="icon"></svg-icon>
                  <router-link to="#">入门指南</router-link>
                </li>
                <li>
                  <svg-icon icon-class="star" style="color: brown;" class="icon"></svg-icon>
                  <router-link to="#">入门指南</router-link>
                </li>
                <li>
                  <svg-icon icon-class="star" style="color: brown;" class="icon"></svg-icon>
                  <router-link to="#">入门指南</router-link>
                </li>
               </ul>
               <div class="calendar">
                  <el-calendar v-model="value"></el-calendar>
               </div>
            </div>

        </div>
        <div class="quickly">
          <h3 style="position: absolute; top: -50px; left: 20px;">快捷入口</h3>
            <div class="item">
                <svg-icon icon-class="jiaqi" class="icon"></svg-icon>
                <span>假期审批</span>
            </div>
            <div class="item">
                <svg-icon icon-class="jiaqi" class="icon"></svg-icon>
                <span>假期审批</span>
            </div>
            <div class="item">
                <svg-icon icon-class="jiaqi" class="icon"></svg-icon>
                <span>假期审批</span>
            </div>
            <div class="item">
                <svg-icon icon-class="jiaqi" class="icon"></svg-icon>
                <span>假期审批</span>
            </div>
        </div>
        <div class="social">
          <!-- 社保申报数据 -->
            <div class="left">
              <h3 class="h3-social">社保申报数据</h3>
            <!-- 申报人数 -->
            <div class="ofpeople">
                <span class="text">申报人数</span>
                <CountTo :start-val="0" :end-val="HomeData.socialInsurance?.declarationTotal" :duration="1000" class="number active"></CountTo>
            </div>
            <!-- 带申报和和申报中 -->
            <div class="process">
                <div class="ofpeople">
                  <span class="text">待申报(人)</span>
                  <CountTo :start-val="0" :end-val="HomeData.socialInsurance?.toDeclareTotal" :duration="1000" class="number"></CountTo>
                </div>
                <div class="ofpeople">
                    <span class="text">申报中(人)</span>
                    <CountTo :start-val="0" :end-val="HomeData.socialInsurance?.declaringTotal" :duration="1000" class="number"></CountTo>
                </div>
            </div>
            <!-- 已申报人数 -->
            <div class="ofpeople">
                <span class="text">已申报</span>
                <CountTo :start-val="0" :end-val="HomeData.socialInsurance?.declaredTotal" :duration="1000" class="number"></CountTo>
            </div>
            </div>
            <!-- 图表1 -->
           <div class="social-earch" ref="echarts"></div>


           <!-- 公积金申报数据 -->
            <h3 style="margin-top: 80px;">公积金申报数据</h3>
            <div class="fn-pepole ofpeople">
             <span class="text" >申报人数</span>
             <CountTo :start-val="0" :end-val="HomeData.providentFund?.declarationTotal" :duration="1000" class="number active"></CountTo>
           </div>
           <!-- 待审包和申报中人数 -->
           <div class="fn-process process">
            <div class="fn-process1 ofpeople">
               <span class="text">待申报(人)</span>
               <CountTo :start-val="0" :end-val="HomeData.providentFund?.toDeclareTotal" :duration="1000" class="number"></CountTo>
            </div>
            <div class="fn-process2 ofpeople">
               <span class="text">申报中(人)</span>
               <CountTo :start-val="0" :end-val="HomeData.providentFund?.declaringTotal" :duration="1000" class="number"></CountTo>
            </div>
           </div>
           <!-- 已申报 -->
            <div class="aready ofpeople">
               <span class="text">已申报(人)</span>
               <CountTo :start-val="0" :end-val="HomeData.providentFund?.declaredTotal" :duration="1000" class="number"></CountTo>
            </div>
             <!-- 图表2-->
           <div class="social-earch2" ref="provide"></div>
        </div>

        <!-- 公积金申报数据 -->
        <div class="fund">
           
        </div>
        <!-- 通知公告 -->
        <div class="notice">
          <h3>通知公告</h3>
            <ul>
               <li class="noticeList" v-for="(item,index) in NoticeList" :key="index">
                   <!-- <svg-icon :icon-class="item.icon" class="icon"></svg-icon> -->
                    <img :src="item.icon" alt="" width="40px" class="icon">
                   <div class="contain">
                       <p class="p">{{ item.notice }}</p>
                       <div class="time">{{ item.createTime }}</div>
                   </div>
               </li>
            </ul>
        </div>
     </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { mapState } from 'vuex';
import { getHomeDataService,getNoticeService } from '@/api/home';
// import * as echarts from 'echarts';
import * as echarts from 'echarts/core' //引入核心包
import { LineChart } from 'echarts/charts' //引入折线图
import { GridComponent } from 'echarts/components' //引入直角坐标系组件
import { CanvasRenderer } from 'echarts/renderers' //引入渲染器
// 注册必须的组件
echarts.use( [LineChart, GridComponent, CanvasRenderer] )
export default {
 components: { CountTo },
 data(){
  return {
    HomeData: {},
    NoticeList: [],
    value: new Date(),
  }
 },
 computed: {
   ...mapState('user',['userInfo'])
 },
 created() {
   this.getHomeData()
   this.getNotice()
 },
 watch: {
    HomeData() {
      // 如果HomeDate发生变化就可以设置图表了
      this.myCharts.setOption({
        xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.HomeData.socialInsurance?.xAxis
          },
        yAxis: {
        type: 'value'
        },
        grid: {
         height: '50%' // 设置grid区域的高度为容器高度的50%
        },
        series: [
           {
            data: this.HomeData.socialInsurance?.yAxis,
            type: 'line',
             areaStyle: {
               color:'#04c9be'
              },
              lineStyle: {
                color:'#04c9be'
              }
            } 
          ]
      }),
      this.provide.setOption({
        xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.HomeData.providentFund?.xAxis
          },
        yAxis: {
        type: 'value'
        },
        grid: {
          left: '10%',    // 距离容器左侧的距离
          top: '40px',     // 距离容器顶部的距离
          right: '10%',   // 距离容器右侧的距离
          bottom: '10%',  // 距离容器底部的距离
          containLabel: true // 如果使用 `containLabel: true`，则图表会自动根据标签大小调整位置
       },
        series: [
           {
            data: this.HomeData.providentFund?.yAxis,
            type: 'line',
             areaStyle: {
               color:'#04c9be'
              },
              lineStyle: {
                color:'#04c9be'
              }
            } 
          ]
      })
    }
 },
 mounted(){
  this.myCharts = echarts.init(this.$refs.echarts, 'dark')
  this.provide = echarts.init(this.$refs.provide, 'dark')
 },
 methods: {
 async getHomeData() {
   const res = await getHomeDataService()
   this.HomeData = res
  },
 async getNotice(){
   const res = await getNoticeService()
   this.NoticeList = res
  },
  
 }
}
</script>

<style lang="scss" scoped>
.help li {
  margin-top: 65px;
}
.help .demo{
  display: flex;
}
.help .demo .calendar{
  margin-left: 100px;
  width: 400px;
}
::v-deep .el-calendar-day {
  height:  40px;
 }
 ::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.quickly {
  position: relative;
  display: flex;
  margin-bottom: 30px;
}
.quickly .item{
  margin-left: 20px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quickly .item .icon{ 
  font-size: 40px;
}
.quickly .item span{
  font-size: 12px;
  color: #999;
}
.active{
  color: aquamarine;
  font-size: 30px !important;
}
.box{
  display: flex;
  flex-wrap: wrap;
}
ul{
  padding: 0;
  margin: 0
}
li{
  list-style: none;
}

.digital{
  flex: 50%;
  padding-left: 20px;
  .header{
    display: flex;
    align-items: center;
    .avatar{
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #04c9be;
      border-radius: 25px;
      text-align: center;
      line-height: 48px;
      color: #fff;
      font-weight: 700;
    }
    .footer{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 50px;
      margin-left: 10px;
    }
    .img{
      width: 50px;
      border-radius: 25px;
    }
    .experience{
      font-size: 12px;
      color: #999;
      margin-left: 10px;
    }
   .address{
      font-size: 12px;
      color: #999;
    }
  }
  .person{
    display: flex;
    flex-wrap: wrap;
    .organization{
      width: 120px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      .org-per{
        padding-bottom: 5px;
        color: #999;
        font-size: 12px;
      }
      .number{
        font-weight: 700;
        font-size: 20px;
        color: #000;
      }
    }
  }
}
.help{
  flex: 50%;
}
.quickly{
  flex: 100%;
}
.social{
  position: relative;
  padding-left: 20px;
  flex: 50%;
  .ofpeople{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .number{
      margin-top: 10px;
      font-size: 20px;
      font-weight: 700;
    }
    .text{
      color: #999;
      font-size: 12px;
    }
  }
  .process{
    display: flex;
    .ofpeople:last-child{
      margin-left: 20px;
    }
  }
}
.notice{
  flex: 50%;
 .noticeList{
  width: 500px;
  position: relative;
  border-bottom: 1px solid #ccc;
  .icon{
    position: absolute;
  }
  .contain{
    margin-left: 45px;
    .p {
      margin-top: 10px;
    }
    .time{
      color: #999;
      font-size: 12px;
      padding-bottom: 5px;
    }
  }
 }
}

.social-earch{
  position: absolute;
  right: 100px;
  top: 50px;
  width: 400px;
  height: 200px;
}
.social-earch2{
  position: absolute;
  right: 100px;
  top: 370px;
  width: 400px;
  height: 200px;
  background-color: pink;
}
.dashboard-container{
  margin-bottom: 100px;
}
</style>
